$(function () {
  var layer = layui.layer;

  //1.1 获取裁剪区域的 DOM 元素
  var $image = $("#image");
  //1.2 配置选项
  const options = {
    //纵横比  就是预览区域的大小对比
    aspectRatio: 1,
    //指定预览区域
    preview: ".img-preview",
  };

  //1.3 创建裁剪区域
  $image.cropper(options);

  //1.4 要实现点击上传按钮 上传图片 所以在html写一个隐藏域
  //1.5 点击上传按钮 让隐藏域触发
  $("#btnChooseImage").on("click", function () {
    $("#file").click();
  });

  //1.5为上传文件 隐藏域绑定change事件
  $("#file").on("change", function (e) {
    // console.log(e);
    var filelist = e.target.files;
    // 1.6做一个严谨判断 吐过length值为0 则表示没有上传文件
    if (filelist.length === 0) return layer.msg("请选择照片");
    // console.log(files); e属性里面的targer 属性里面的 files 就是上传的文件

    // 2.拿到用户选择的文件
    var file = e.target.files[0]; //foles[0]就是上传的文件路径
    // 2.1根据选择的文件，创建一个对应的 URL 地址：
    var imgURL = URL.createObjectURL(file);
    // 2.3先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
    $image
      .cropper("destroy") // 销毁旧的裁剪区域
      .attr("src", imgURL) // 重新设置图片路径
      .cropper(options); // 重新初始化裁剪区域
  });

  // 3.  为确认按注册点击事件
  // 3.1 将裁剪后的图片，输出为 base64 格式的字符串
  $("#btnUpload").on("click", function () {
    //   3.2拿到上传 剪切后的图片
    var dataURL = $image
      .cropper("getCroppedCanvas", {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
      })
      .toDataURL("image/png"); // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
    // 4.调用接口，把头像上传到服务器
    $.ajax({
      type: "POST",
      url: "/my/update/avatar",
      data: {
        avatar: dataURL,
      },
      success: function (res) {
        if (res.status !== 0) return layer.msg("更新头像失败");
        layer.msg("上传头像成功");
        // 4.1需要重新渲染父页面的头像元素
        window.parent.getUserInfo();
      },
    });
  });
});
